<template>
	<!--  店铺详情  -->
	<!-- 	<view class="content" :style="{paddingTop: navBtm}"> -->
	<view class="content">
		<view class="content_bg">
			<view class="up"></view>
			<view class="down"></view>
		</view>
		
		<view class="shop_info_box">
			<view class="shop_info">
				<view class="up">
					<view class="left">
						
						<view class="shop_title">
							<text >万达美食(万达店)</text>
							<view class="auth">
								<view class="auth_text">
									<text >官方品牌店</text>
								</view>
							</view>
						</view>
						
						<u-rate :count="5" v-model="shopScore" size="22"></u-rate>
					
						<view class="time">
							<u-icon name="clock" color="#B6B8BC" size="22"></u-icon>
							<text style="margin-left: 10rpx;">30分钟送达</text>
						</view>
					
						<view class="member">
							<view class="price">
								<text style="font-size: 22rpx; line-height: 22rpx;">¥</text>
								<text>8</text>	
							</view>
							<u-icon name="integral-fill" color="#5F452C" size="22"></u-icon>
							<text style="margin-left: 5rpx;">会员领取</text>
						</view>
						
					</view>
					
					<view style="padding-top: 6rpx;">
						<image src="http://www.jiubakeji.cn/images/wdgc.jpg" class="avatar"></image>
					</view>
					
					
				</view>
				
				<view class="activity">
					<view class="left">
						<text class="comm">满30减10</text>
						<text class="comm">满56减33</text>
						<text class="comm">满100减49</text>
					</view>
					<view class="right">
						<text class="comm" style="margin-right: 3rpx;">4个活动</text>
						<u-icon name="arrow-down" color="#565961" size="13"></u-icon>
					</view>
				</view>
				
			</view>
		</view>
			
		<view class="shop_tab">
			<MyNabBar :tabList="shopTabList"></MyNabBar>
		</view>
		
		<view class="shop_content">
			
			<view class="order_box">
				<!-- 推荐 -->
				<view class="recommend">
					<text class="title">商家推荐</text>
					<scroll-view class="goods_list" scroll-x="true" >
						<view class="goods_item_box"  v-for="item in 5">
							<view class="goods_item">
								
								<view class="goods_img" >
									<image src="http://www.jiubakeji.cn/images/meishi.jpeg" mode="" style="width: 100%; height: 100%;"></image>
								</view>
								
								<text class="goods_name">皮蛋瘦肉粥</text>
								
								<view class="goods_info">
									<text style="margin-right: 15rpx;">月售247单</text>
									<text>好评率93%</text>
								</view>
								
								<view class="goods_add">
									<view class="goods_price">
										<text style="font-size: 24rpx; line-height: 24rpx;">¥</text>
										<text>15.9</text>
									</view>
									<view class="add_icon">	
									</view>
								</view>
								
								
							</view>
												
						</view>
						
					</scroll-view>
				</view>

				<view class="shop_goods_list">
					<view class="goods_class">
						<view class="class_item" style="padding-top: 0;">
							<text>咖啡</text>
						</view>
						<view class="class_item">
							<text>奶茶</text>
						</view>
						<view class="class_item">
							<text>水果茶</text>
						</view>
						<view class="class_item">
							<text>小食</text>
						</view>
					</view>
					<view class="goods_list">
						<view class="goods_item" v-for="item in 6">
							<view class="goods_img">
								<image src="http://www.jiubakeji.cn/images/meishi.jpeg" mode=""  style="width: 100%; height: 100%;"></image>
							</view>
							
							<view class="goods_info">
								<text style="font-size: 34rpx; color: #000000;">食神鲍鱼捞饭</text>
								
								<view class="sales_volume">
									<text style="margin-right: 13rpx;">月售2347单</text>
									<text>好评率88%</text>
								</view>
								
								<view class="discount">
									<text class="discount_info" style="font-size: 18rpx;">5.5折</text>
									<text>每单限点一份</text>
								</view>
								
								<view class="goods_add">
									<view class="goods_price">
										<text style="font-size: 24rpx; line-height: 24rpx;">¥</text>
										<text>49.8</text>
									</view>
									<view class="add_icon">	
									</view>
								</view>
								
							</view>
							
						</view>
					</view>
				</view>
			
			</view>
		</view>
		
	</view>
</template>

<script>
	import MyNabBar from '@/components/my_navbar/my_navbar.vue'
	export default {
		data() {
			return {
				shopScore: 3,
				shopTabList: [
					{
						name: "点餐"
					},
					{
						name: "评价"
					},
					{
						name: "商家"
					}
				]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		},
		components: {
			MyNabBar
		}
		
		
	}
</script>

<style lang="scss">
	.content {
		// padding-bottom: calc(25rpx + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		.content_bg {
			position: fixed;
			left: 0;
			top: 0;
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			z-index: -1;
			background-color: #fff;
			.up {
				height: 170rpx;
				background: #0156F6;
			}
			.down {
				height: 25rpx;
				background: #0156F6;
				border-radius: 0 0 50% 50%;
			}
			
		
			
		}
		
		.shop_info_box {
			margin-top: 15rpx;
			padding: 0 30rpx;
			
			.shop_info {
				// height: 303rpx;
				padding: 30rpx 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(0,0,0,0.08);
				border-radius: 20rpx;
				
				
				
				
				.up {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					.left {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						.shop_title {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;
							font-size: 34rpx;
							font-weight: 500;
							color: #2F3135;
							
							.auth {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 148rpx;
								height: 41rpx;
								margin-left: 16rpx;
								transform: skewX(-15deg);
								font-size: 24rpx;
								color: #FFFFFF;
								background: linear-gradient(90deg, #6EB2FF, #5DA2F1);
								border-radius: 10rpx;
								.auth_text {
									transform: skewX(15deg);
								}
								
							}
							
						}
						
						.time {
							display: flex;
							align-items: center;
							margin-top: 15rpx;
							font-size: 22rpx;
							color: #B6B8BC;
						}
						
						.member {
							display: flex;
							align-items: center;
							margin-top: 25rpx;
							padding: 10rpx;
							font-size: 24rpx;
							color: #5F452C;
							background: #EED5A0;
							border-radius: 6rpx;
							line-height: 24rpx;
							.price {
								display: flex;
								align-items: flex-end;
								margin-right: 10rpx;
								font-size: 34rpx;
								line-height: 34rpx;
							}
						}
						
						
					}
					
					.avatar {
						width: 117rpx;
						height: 117rpx;
						border-radius: 50%;
						
					}
					
				}
				
				.activity {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 40rpx;
					font-size: 24rpx;
					color: #565961;
					.comm {
						margin-right: 10rpx;
						padding: 8rpx 11rpx;
					}
					
					.right {
						display: flex;
						align-items: center;
					}
					
				}
				
			}
			
			
		}
		
		.shop_tab {
			margin-top: 10rpx;
			padding: 0 120rpx;
			border-bottom: 1px solid rgba(0, 0, 0, .1);
			background-color: #fff;
		}
		
		.shop_content {
			background-color: #fff;
			.order_box {
				padding-top: 50rpx;
				// 推荐
				.recommend {
					padding-left: 30rpx;
					font-family: SourceHanSansSC;
					box-sizing: border-box;
					.title {
						font-size: 32rpx;
						font-weight: 500;
						color: #2F3135;
					}
					
					.goods_list {
						margin-top: 25rpx;
						white-space: nowrap;
						width: 100%;
						
						.goods_item_box {
							display: inline-block;
							margin-right: 20rpx;
							.goods_item {
								display: flex;
								flex-direction: column;
								width: 242rpx;
								.goods_img {
									width: 100%;
									height: 242rpx;
									border-radius: 10rpx;
									overflow: hidden;
								}
								
								.goods_name {
									font-size: 32rpx;
									font-weight: 400;
									margin-top: 22rpx;
									color: #2F3135;
									line-height: 32rpx;
								}
								
								.goods_info {
									display: flex;
									align-items: center;
									margin-top: 15rpx;
									font-size: 22rpx;
									font-weight: 400;
									color: #B3B9C2;
									line-height: 22rpx;
								}
								
								.goods_add {
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 22rpx;
									.goods_price {
										display: flex;
										align-items: flex-end;
										font-size: 32rpx;
										color: #FF641F;
										line-height: 32rpx;
									}
									
									.add_icon {
										width: 38rpx;
										height: 38rpx;
										margin-right: 12rpx;
										background: url(@/static/img/add.png) no-repeat;
										background-size: 38rpx;
									}
									
								}
								
								
							}
							
							
						}
						
						
					}
					
				}
				
				
				.shop_goods_list {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-top: 65rpx;
					.goods_class {
						width: 165rpx;
						padding: 0 40rpx;
						margin-right: 15rpx;
	
						.class_item {
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 40rpx 0;
						
						}
					}
					
					.goods_list {
						flex: 1;

						.goods_item {
							display: flex;
							width: 100%;
							margin-bottom: 22rpx;
							padding: 2rpx 30rpx 0 0;

							.goods_img {
								width: 168rpx;
								height: 168rpx;
								margin-right: 17rpx;
								border-radius: 10rpx;
								overflow: hidden;
							}
							
							.goods_info {
								display: flex;
								flex-direction: column;
								flex: 1;
								font-family: Source Han Sans CN;
								
								.sales_volume {
									margin-top: 13rpx;
									font-size: 22rpx;
									color: #B3B9C2;
								}
								
								.discount {
									margin-top: 13rpx;
									font-size: 20rpx;
									color: #FF8B62;
									.discount_info {
										margin-right: 5rpx;
										padding: 4rpx 8rpx;
										border: 1px solid #FF8B62;
										border-radius: 2px;
										
									}
								}
								
								.goods_add {
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 20rpx;
									.goods_price {
										display: flex;
										align-items: flex-end;
										font-size: 32rpx;
										color: #FF641F;
										line-height: 32rpx;
									}
									
									.add_icon {
										width: 38rpx;
										height: 38rpx;
										margin-right: 12rpx;
										background: url(@/static/img/add.png) no-repeat;
										background-size: 38rpx;
									}
									
								}
								
							}
							
						}
					}
					
					
				}
				
				
			}
		}
		
	}
</style>
